<template>
  <el-card class="missions-card">
    <template #header>
      <div class="card-header">
        <span>教学任务列表</span>
        <div class="header-actions">
          <el-select 
            :model-value="termFilter" 
            placeholder="选择学期" 
            @update:model-value="$emit('update:termFilter', $event)"
            @change="$emit('term-change')" 
            style="width: 200px;"
          >
            <el-option
              v-for="item in termOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select 
            :model-value="courseFilter" 
            placeholder="选择课程" 
            clearable 
            @update:model-value="$emit('update:courseFilter', $event)"
            @change="$emit('filter-change')" 
            style="width: 200px;"
          >
            <el-option
              v-for="item in filteredCourseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            :model-value="searchQuery"
            placeholder="搜索教学任务"
            clearable
            style="width: 200px;"
            @update:model-value="$emit('update:searchQuery', $event)"
            @input="$emit('search-change', $event)"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </template>
    
    <el-table
      v-loading="loading"
      :data="paginatedMissions"
      border
      style="width: 100%"
      @row-click="$emit('mission-select', $event)"
      highlight-current-row
      :row-class-name="getMissionRowClass"
    >
      <el-table-column label="课程名称" prop="courseName" min-width="150" show-overflow-tooltip resizable>
        <template #default="scope">
          <div class="mission-info">
            <span class="primary-text">{{ scope.row.courseName }}</span>
            <el-tooltip v-if="scope.row.description" effect="dark" :content="scope.row.description || '无课程描述'" placement="top">
              <template #default>
                <el-icon><InfoFilled /></el-icon>
              </template>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="课程编码" prop="courseCode" width="120" resizable />
      <el-table-column label="课程类别" width="100" resizable>
        <template #default="scope">
          <span>{{ scope.row.courseTypeName || '未分类' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学时" width="80" resizable>
        <template #default="scope">
          <span>{{ scope.row.totalHours || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学期" prop="termName" width="120" resizable />
      <el-table-column label="队次" min-width="120" resizable>
        <template #default="scope">
          <div v-if="scope.row.classNames && scope.row.classNames.length > 0">
            <el-tag 
              v-for="(className, index) in scope.row.classNames" 
              :key="index" 
              size="small" 
              style="margin-right: 5px; margin-bottom: 2px;"
            >
              {{ className }}
            </el-tag>
          </div>
          <span v-else class="text-muted">未分配</span>
        </template>
      </el-table-column>
      <el-table-column label="教师" prop="teacherName" width="100" resizable />
      <el-table-column label="学员数" width="100" resizable>
        <template #default="scope">
          <el-tag 
            :type="getStudentCountTagType(scope.row)" 
            :effect="getStudentCountTagEffect(scope.row)"
          >
            {{ getStudentCount(scope.row) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right" resizable>
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            @click.stop="$emit('mission-select', scope.row)"
          >
            管理学员
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total="totalMissions"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="$emit('page-change', $event)"
      />
    </div>
  </el-card>
</template>

<script>
import { computed } from 'vue'
import { Search, InfoFilled } from '@element-plus/icons-vue'

export default {
  name: 'MissionStudentTaskList',
  components: {
    Search,
    InfoFilled
  },
  props: {
    missions: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    termOptions: {
      type: Array,
      default: () => []
    },
    courseOptions: {
      type: Array,
      default: () => []
    },
    selectedMissionId: {
      type: [String, Number],
      default: null
    },
    totalMissions: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    termFilter: {
      type: String,
      default: ''
    },
    courseFilter: {
      type: String,
      default: ''
    },
    searchQuery: {
      type: String,
      default: ''
    }
  },
  emits: [
    'mission-select', 
    'page-change', 
    'search-change', 
    'filter-change', 
    'term-change',
    'update:termFilter', 
    'update:courseFilter',
    'update:searchQuery'
  ],
  setup(props) {
    // 计算分页后的任务数据
    const paginatedMissions = computed(() => {
      if (!Array.isArray(props.missions)) return []
      
      const start = (props.currentPage - 1) * props.pageSize
      const end = start + props.pageSize
      return props.missions.slice(start, end)
    })

    // 根据选中学期过滤课程选项
    const filteredCourseOptions = computed(() => {
      // 如果没有选择学期，返回空数组
      if (!props.termFilter) {
        return []
      }
      
      return props.courseOptions
    })

    // 获取学员数量
    const getStudentCount = (mission) => {
      if (!mission) return 0
      return mission.studentCount || 0
    }

    // 根据学员数量确定标签类型
    const getStudentCountTagType = (mission) => {
      const count = getStudentCount(mission)
      if (count === 0) return 'info'
      if (count < 10) return 'warning'
      if (count < 30) return 'success'
      return 'primary'
    }

    // 根据学员数量确定标签效果
    const getStudentCountTagEffect = (mission) => {
      const count = getStudentCount(mission)
      return count === 0 ? 'plain' : 'dark'
    }

    // 获取任务行样式
    const getMissionRowClass = ({ row }) => {
      if (row.id === props.selectedMissionId) {
        return 'selected-mission-row'
      }
      return ''
    }

    return {
      paginatedMissions,
      filteredCourseOptions,
      getStudentCount,
      getStudentCountTagType,
      getStudentCountTagEffect,
      getMissionRowClass
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mission-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mission-info .primary-text {
  font-weight: 500;
}

.mission-info .el-icon {
  font-size: 14px;
  color: #909399;
  cursor: pointer;
}

.text-muted {
  color: #909399;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.selected-mission-row) {
  background-color: #f0f9eb !important;
}
</style>
